<!-- 交接内容 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title"> </PageHeaderNew>
    </template>
    <div class="wrap" v-if="formData?.userData">
      <a-form ref="refForm" auto-label-width :model="formData.userData">
        <section>
          <div class="title-box">
            <div class="title">
              <div
                :style="{
                  marginLeft: '20px'
                }"
              >
                基础信息
              </div>
            </div>
          </div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="name" label="离职人员名称" show-colon>
                <a-input v-model="formData.userData.name" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="mobile" label="手机号码" show-colon>
                <a-input v-model="formData.userData.mobile" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="mobile" label="部门" show-colon>
                <a-input v-model="formData.userData.departmentName" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="mobile" label="职位" show-colon>
                <a-input v-model="formData.userData.positionName" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="mobile" label="直接上级" show-colon>
                <a-input v-model="formData.userData.superiorName" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="mobile" label="离职时间" show-colon>
                <a-input v-model="formData.userData.leaveTime" disabled />
              </a-form-item>
            </a-col>
          </a-row>
        </section>
      </a-form>
      <section v-if="formData?.designData?.wenJian?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              文件移交
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.wenJian"
          :pagination="false"
          v-model:selected-keys="tableSelected.wenJian"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="文件名称" :width="200" dataIndex="name">
              <template #title>
                <span class="star">文件名称</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column
              title="文件交接说明"
              :width="200"
              dataIndex="remark"
            >
              <template #cell="{ record }">
                <a-textarea
                  v-model="record.remark"
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column title="数量" :width="200" dataIndex="num">
              <template #title>
                <span class="star">数量</span>
              </template>
              <template #cell="{ record }">
                <a-input-number
                  hide-button
                  :min="1"
                  v-model="record.num"
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('wenJian', 1, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('wenJian', 2, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>

      <section v-if="formData?.designData?.riChang?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              日常工作移交
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.riChang"
          :pagination="false"
          v-model:selected-keys="tableSelected.riChang"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="工作事项" :width="200" dataIndex="name">
              <template #title>
                <span class="star">工作事项</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column
              title="工作事项情况说明"
              :width="200"
              dataIndex="remark"
            >
              <template #cell="{ record }">
                <a-textarea
                  v-model="record.remark"
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('riChang', 1, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('riChang', 2, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>

      <section v-if="formData?.designData?.unFinished?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              未完成事项
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.unFinished"
          :pagination="false"
          v-model:selected-keys="tableSelected.unFinished"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="事项" :width="200" dataIndex="name">
              <template #title>
                <span class="star">事项</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column title="完成情况" :width="200" dataIndex="situation">
              <template #cell="{ record }">
                <a-textarea
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  v-model="record.situation"
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="事项情况说明"
              :width="200"
              dataIndex="remark"
            >
              <template #cell="{ record }">
                <a-textarea
                  v-model="record.remark"
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column title="完成时间" :width="200" dataIndex="endTime">
              <template #cell="{ record }">
                <a-date-picker
                  format="YYYY-MM-DD"
                  v-model="record.endTime"
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="
                    showHumanModal('unFinished', 1, rowIndex)
                  "
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="
                    showHumanModal('unFinished', 2, rowIndex)
                  "
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>

      <section v-if="formData?.designData?.daiBan?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              待办事项
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.daiBan"
          :pagination="false"
          v-model:selected-keys="tableSelected.daiBan"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="事项" :width="200" dataIndex="name">
              <template #title>
                <span class="star">事项</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column title="完成情况" :width="200" dataIndex="situation">
              <template #cell="{ record }">
                <a-textarea
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  v-model="record.situation"
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="事项情况说明"
              :width="200"
              dataIndex="remark"
            >
              <template #cell="{ record }">
                <a-textarea
                  v-model="record.remark"
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column title="完成时间" :width="200" dataIndex="endTime">
              <template #cell="{ record }">
                <a-date-picker
                  format="YYYY-MM-DD"
                  v-model="record.endTime"
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('daiBan', 1, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('daiBan', 2, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>

      <section v-if="formData?.designData?.ziChan?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              资产移交
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.ziChan"
          :pagination="false"
          v-model:selected-keys="tableSelected.ziChan"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="资产名称" :width="200" dataIndex="name">
              <template #title>
                <span class="star">资产名称</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column title="数量" :width="200" dataIndex="num">
              <template #title>
                <span class="star">数量</span>
              </template>
              <template #cell="{ record }">
                <a-input-number
                  hide-button
                  :min="1"
                  v-model="record.num"
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column title="用途" :width="200" dataIndex="remark">
              <template #cell="{ record }">
                <a-textarea
                  v-model="record.remark"
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('ziChan', 1, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('ziChan', 2, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>

      <section v-if="formData?.designData?.ziYuan?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              资源移交
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.ziYuan"
          :pagination="false"
          v-model:selected-keys="tableSelected.ziYuan"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="资源名称" :width="200" dataIndex="name">
              <template #title>
                <span class="star">资源名称</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column title="资源上传" :width="200" dataIndex="url">
              <!-- <template #title>
                    <span class="star">资源上传</span>
                  </template> -->
              <template #cell="{ record }">
                <a-upload
                  action="http://192.168.0.178:30058/lke_file"
                  @success="(fileItem, record1) => onSuccess(fileItem, record)"
                  @before-upload="beforeUpload"
                  @before-remove="
                    (fileItem, record1) => beforeRemove(fileItem, record)
                  "
                  :limit="1"
                  ref="uploadRef"
                  :default-file-list="filterDefaultFileList(record.url)"
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('ziYuan', 1, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('ziYuan', 2, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>

      <section v-if="formData?.designData?.other?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              其他交接事项
            </div>
          </div>
        </div>
        <a-table
          :row-selection="rowSelection"
          :data="formData?.designData?.other"
          :pagination="false"
          v-model:selected-keys="tableSelected.other"
          row-key="id"
        >
          <template #columns>
            <a-table-column title="序号" :width="80">
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column title="事项名称" :width="200" dataIndex="name">
              <template #title>
                <span class="star">事项名称</span>
              </template>
              <template #cell="{ record }">
                <a-input v-model="record.name" disabled />
              </template>
            </a-table-column>
            <a-table-column title="事项说明" :width="200" dataIndex="remark">
              <template #cell="{ record }">
                <a-textarea
                  v-model="record.remark"
                  style="width: 300px"
                  show-word-limit
                  :max-length="1000"
                  allow-clear
                  disabled
                />
              </template>
            </a-table-column>
            <a-table-column
              title="办理状态"
              :width="100"
              dataIndex="num"
              v-if="type === 3"
            >
              <template #cell="{ record }">
                <span :class="handleStatusClass(record)">
                  {{ handleStatusContent(record) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="接收人" :width="200" dataIndex="acceptId">
              <template #title>
                <span class="star">接收人</span>
              </template>
              <template #cell="{ record, rowIndex }">
                <span
                  :class="handleAcceptOrSuperviseClass(record, 'acceptHandle')"
                  v-if="type === 3"
                >
                  {{ record.acceptHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.acceptId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('other', 1, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
            <a-table-column title="监督人" :width="200" dataIndex="superviseId">
              <template #cell="{ record, rowIndex }">
                <span
                  :class="
                    handleAcceptOrSuperviseClass(record, 'superviseHandle')
                  "
                  v-if="type === 3 && record.superviseId > 0"
                >
                  {{ record.superviseHandle === 1 ? '已确认' : '未确认' }}
                </span>
                <span v-else-if="record.superviseId === 0">暂无</span>
                <a-select
                  v-else
                  :popup-visible="false"
                  placeholder="请选择"
                  v-model="record.superviseId"
                  allow-search
                  allow-clear
                  @popup-visible-change="showHumanModal('other', 2, rowIndex)"
                  disabled
                >
                  <a-option
                    v-for="item in humanList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>
      <section v-if="formData?.designData?.baseInfo?.status === 4">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              退回原因
            </div>
          </div>
        </div>
        <div>
          <a-textarea
            :auto-size="{
              minRows: 4
            }"
            v-model="formData.designData.baseInfo.returnReason"
            disabled
          ></a-textarea>
        </div>
      </section>
    </div>
    <footer>
      <a-space>
        <a-button class="btn" @click="$router.go(-1)">取消</a-button>
        <a-button
          class="btn"
          status="danger"
          type="outline"
          v-if="type === 1"
          @click="turnDown"
          >驳回</a-button
        >
        <a-button
          class="btn"
          type="primary"
          v-if="type === 1 || type === 3"
          @click="sure(type === 1 ? 5 : 6)"
          >确认</a-button
        >
      </a-space>
    </footer>
  </ContentCard>
</template>
<script lang="tsx" setup>
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';
import {
  getOrganizationDetailById,
  getPositionDetailById,
  getHumanDetail
} from '@/utils/common';
import {
  SendWorkHandover,
  SaveWorkHandover,
  GetSendWorkHandleDetail,
  DelWorkHandleSub
} from '@/apis/management/human/baseSetting/leaveSetting';
import { ChangeHumanInductionState } from '@/apis/management/personnel/changeManagement/inductionManagement';
import { cloneDeep } from 'lodash';
import { Message, Modal, FormItem, Form, Textarea } from '@arco-design/web-vue';
import { getAllHumanRoster } from '@/utils/common';

const route = useRoute();
const title = '工作交接表';
const leavePersonId = +route.query.userId; // 离职人员id
const type = +route.query.type; // 1 总确认人 2 总监督人或查看详情 3 其他每一小项的监督人或者确认人
const userId = +localStorage.getItem('userId'); // 当前登录人id

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
});

const formData = ref({
  userData: {},
  designData: {}
});

// 储存各个table的选中的id
let tableSelected = reactive({
  wenJian: [],
  riChang: [],
  unFinished: [],
  daiBan: [],
  ziChan: [],
  ziYuan: [],
  other: []
});

let orginData = ref(); // 储存原始数据
const getWorkHandoverData = async () => {
  try {
    const res = await GetSendWorkHandleDetail({
      userId: leavePersonId
    });
    orginData.value = cloneDeep(res);
    if (type === 3) {
      formData.value.designData = handleData(res);
    } else formData.value.designData = res;
    console.log('==================res==================');
    console.log(formData.value.designData);
    console.log('====================================');
    await getHumanData();
    formData.value.userData = humanInfo.value;
    // formData.value.baseInfo.userName = humanInfo.value.name;
  } catch (error: unknown) {
    console.log(error);
  }
};
getWorkHandoverData();

// 处理传过来的数据，只显示接收人或监督人有当前登录用户的数据
const handleData = (data: any) => {
  const filterData = (arr: any) => {
    if (arr.length > 0) {
      const res = arr.filter(
        (item: any) => item.acceptId === userId || item.superviseId === userId
      );
      return res;
    }
    return [];
  };
  for (let i in data) {
    if (i !== 'baseInfo') {
      data[i] = filterData(data[i]);
    }
  }
  return data;
};

let humanInfo = ref(); // 人员信息
// 获取人员信息
const getHumanData = async () => {
  try {
    const res = await GetHumanRosterDetail({
      id: leavePersonId
      // id: 154
    });
    humanInfo.value = res;
    getOrganizationDetailById(humanInfo.value.companyId).then((res: any) => {
      humanInfo.value.companyName = res.name;
    });
    getOrganizationDetailById(humanInfo.value.departmentId).then(
      (res: any) => (humanInfo.value.departmentName = res.name)
    );
    getPositionDetailById(humanInfo.value.positionId).then(
      (res: any) => (humanInfo.value.positionName = res.name)
    );
    // 获取入职时间
    humanInfo.value.enterTime = getControlValue(
      'CC0D5415792B24BBCAD7DF5AB8A25A0AB'
    );
    // 获取直接上级
    getHumanDetail(getControlValue('CECEBAA743F9B4160B40A5A3E78588712')).then(
      (res: any) => (humanInfo.value.superiorName = res.name)
    );
  } catch (error: unknown) {
    console.log(error);
  }
};
// 获取控件的值
const getControlValue = (code: string) => {
  const temp = humanInfo.value.useTemplate.collectionModel[0].controlModel.find(
    (el: any) => el.ctlCode === code
  );
  return temp?.ctlValue?.ctlValue;
};
let humanList = ref();

const getAllHumanList = async () => {
  const res = await getAllHumanRoster();
  humanList.value = res;
};
getAllHumanList();

// 处理资源移交文件数据结构
const filterDefaultFileList = (record: any) => {
  if (record) {
    if (JSON.parse(record).url === '') {
      return [];
    } else {
      return [JSON.parse(record)];
    }
  } else return [];
};

// 处理办理状态的class
const handleStatusClass = (record: any) => {
  if (record.superviseId > 0) {
    return {
      'text-blue': record.acceptHandle === 1 || record.superviseHandle === 1,
      'text-green': record.acceptHandle === 1 && record.superviseHandle === 1,
      'text-gray':
        (record.acceptHandle === 2 && record.superviseHandle === 2) ||
        (record.acceptHandle === 0 && record.superviseHandle === 0)
    };
  } else {
    return {
      'text-green': record.acceptHandle === 1,
      'text-gray': record.acceptHandle === 2 || record.acceptHandle === 0
    };
  }
};

//处理办理状态的内容
const handleStatusContent = (record: any) => {
  if (record.superviseId > 0) {
    return record.acceptHandle === 1 && record.superviseHandle === 1
      ? '已完成'
      : record.acceptHandle === 1 || record.superviseHandle === 1
      ? '进行中'
      : '未开始';
  } else {
    return record.acceptHandle === 1 ? '已完成' : '未开始';
  }
};

// 处理接收人或监督人的class
const handleAcceptOrSuperviseClass = (
  record: any,
  type: 'acceptHandle' | 'superviseHandle'
) => {
  return {
    'text-blue': record[type] === 1,
    'text-gray': record[type] !== 1
  };
};

// 驳回
const turnDown = () => {
  Modal.open({
    title: '驳回',
    width: 600,
    content: () => (
      <Form>
        <FormItem label="驳回原因" show-colon>
          <Textarea
            v-model={formData.value.designData.baseInfo.returnReason}
            placeholder="请输入驳回原因"
            autoSize={{
              minRows: 4
            }}
          />
        </FormItem>
      </Form>
    ),
    onOk: () => {
      sure(4);
    }
  });
};

// 确认
const sure = async (status: 4 | 5 | 6) => {
  try {
    formData.value.designData.baseInfo.status = status;

    handleSureData(formData.value.designData);
    handleSureData(orginData.value);
    console.log('====================================');
    console.log(tableSelected);
    console.log(formData.value.designData);
    console.log('====================================');
    // 如果不是总确认人确认
    if (type !== 3) {
      await SaveWorkHandover({
        baseInfo: formData.value.designData.baseInfo
      });
    } else {
      handleSureData(formData.value.designData);
      handleSureData(orginData.value);
      if (isAllHandle()) {
        formData.value.designData.baseInfo.status = 7;
        await ChangeHumanInductionState({
          ids: [leavePersonId],
          type: 6
        });
      }
      await SaveWorkHandover(formData.value.designData);
    }

    if (status === 4) Message.success('驳回成功！');
    else Message.success('确认成功！');
  } catch (error: unknown) {
    console.log(error);
  }
};

// 处理确认的数据
const handleSureData = (data: any) => {
  const mapData = (arr: [], selectedArr: []) => {
    if (selectedArr.length === 0) return arr;
    arr = arr.map((el: any) => {
      if (selectedArr.includes(el?.id)) {
        if (el.acceptId === userId) el.acceptHandle = 1;
        if (el.superviseId === userId) el.superviseHandle = 1;
      }
      return el;
    });
    return arr;
  };

  for (let i in data) {
    if (i !== 'baseInfo') {
      data[i] = mapData(data[i], tableSelected[i]);
    }
  }
};

// 是否所有人都已经确认
const isAllHandle = () => {
  let flag = true;
  for (let i in orginData.value) {
    if (i !== 'baseInfo') {
      for (let el of orginData.value[i]) {
        if (el.superviseId > 0) {
          if (el.acceptHandle !== 1 || el.superviseHandle !== 1) {
            flag = false;
          }
        } else {
          if (el.acceptHandle !== 1) {
            flag = false;
          }
        }
        break;
      }
    }
  }
  return flag;
};
</script>

<style scoped lang="less">
.wrap {
  width: 90%;
  margin: 20px auto;

  section {
    margin-bottom: 20px;
    .title-box {
      position: relative;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 36px;
        border-radius: 4px;
        font-weight: 700;
        margin-bottom: 10px;
        background: #edeffd;
      }

      &::before {
        position: absolute;
        // top: 33px;
        left: 10px;
        display: inline-block;
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        margin-right: 20px;
        border-radius: 2px;
        // transform: translateY(-50%);
        content: '';
        background-color: #165dff;
      }
      .icon {
        cursor: pointer;
        margin-right: 20px;
      }
    }

    .star::before {
      content: '*';
      color: red;
    }
    .add {
      background-color: #fff;
      border: 1px solid #eee;
      color: #3d7eff;
      padding: 10px;
      text-align: center;
    }
  }
}

footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  .btn {
    min-width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
